<template>
  <a-tabs :size="size">
    <a-tab-pane key="globalConfig" tab="全局配置">
      <a-form :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol">
        <a-row>
          <a-col :span="direction == 'bottom' ? formItemLayout.colSpan : 24">
            <a-form-item label="爬虫名称">
              <a-input
                placeholder="请输入爬虫名称"
                :size="size"
                :defaultValue="getCellValue(props, 'spiderName', '未定义名称')"
                @change="(e) => setCellValue(props, 'spiderName', e)"
              />
            </a-form-item>
          </a-col>
          <a-col :span="direction == 'bottom' ? formItemLayout.colSpan : 24">
            <a-form-item label="提交策略">
              <a-select
                :size="size"
                :defaultValue="getCellValue(props, 'submit-strategy', 'random')"
                @change="(val) => setCellValue(props, 'submit-strategy', val)"
              >
                <a-select-option value="random">随机</a-select-option>
                <a-select-option value="linked">顺序</a-select-option>
                <a-select-option value="child">子优先</a-select-option>
                <a-select-option value="parent">父优先</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :span="direction == 'bottom' ? formItemLayout.colSpan : 24">
            <a-form-item label="最大线程数">
              <a-input-number
                placeholder="请输入最大线程数"
                :defaultValue="getCellValue(props, 'threadCount')"
                @change="(e) => setCellValue(props, 'threadCount', e)"
                :size="size"
                :min="1"
                style="width: 100%"
              />
            </a-form-item>
          </a-col>
          <a-col :span="direction == 'bottom' ? formItemLayout.colSpan : 24">
            <a-form-item label="死循环阀值">
              <a-input-number
                placeholder="请输入死循环阀值（不填默认5000）"
                :defaultValue="getCellValue(props, 'deadCycleThreshold')"
                @change="(e) => setCellValue(props, 'deadCycleThreshold', e)"
                :size="size"
                :min="1"
                style="width: 100%"
              />
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
    </a-tab-pane>
    <a-tab-pane key="globalParamsConfig" tab="全局参数">
      <a-col ref="table">
        <TableAndModal :editor="editor" :cell="cell" :config="data.globalParamsConfig" />
      </a-col>
    </a-tab-pane>
    <a-tab-pane key="globalCookieConfig" tab="全局Cookie">
      <a-col ref="table">
        <TableAndModal :editor="editor" :cell="cell" :config="data.globalCookieConfig" />
      </a-col>
    </a-tab-pane>
    <a-tab-pane key="globalHeaderConfig" tab="全局Header">
      <a-col ref="table">
        <TableAndModal :editor="editor" :cell="cell" :config="data.globalHeaderConfig" />
      </a-col>
    </a-tab-pane>
  </a-tabs>
</template>

<script setup>
  import { ref, reactive } from 'vue';
  import { setCellValue, getCellValue } from '../utils/tools';
  import TableAndModal from '../components/tableAndModal.vue';
  import data from '../json/root-data.json';
  const props = defineProps({
    direction: { type: String, default: 'bottom' },
    cell: { type: Object },
    editor: { type: Object },
  });
  const size = ref('small');
  const formItemLayout = reactive({
    labelCol: { span: 5 },
    wrapperCol: { span: 17 },
    colSpan: 6,
  });
</script>
